طراحی اصولی سایت responsive
نوشته شده توسط : cyrus

طراحی سایت ریسپانسیو (Responsive) به معنای سایت واکنش گرایی است که فرم و ساختار و چیدمان اجزای آن شناور بوده و با ابعاد و رزولوشن دستگاه های مختلف تغییر یافته و با سایز صفحه نمایشگر آن دستگاه سازگاری می یابد تا کاربران صرف نظر از اینکه صفحه نمایش دستگاه شان کوچک باشد مثل اکثر گوشی های اندروید موبایل یا نمایشگری متوسط و بزرگ داشته باشند مثل تبلت، لپ تاپ و کامپیوترهای خانگی، بتوانند به راحتی همانگونه که سایت را در مانیتورهای بزرگ کامپیوتر مشاهده نموده و استفاده می نمایند از همان وب سایت بر روی صفحه نمایشگر تلفن همراه یا تبلت خود نیز از سایت مزبور استفاده کنند.

طراحی وب سایت واکنش گرا

طراحی سایت واکنشگرا و غیر واکنشگرا

برای تشخیص ریسپانسیو بودن یک سایت و تفاوت سایت های ریسپانسیو و غیر ریسپانسیو، سایت مورد نظرتان را در گوشی هوشمند یا تبلت باز کنید و عرض مرورگر را به آهستگی کم و زیاد نمایید. در صورتی که  سایت واکنش گرا باشد مشاهده خواهید نمود که اندازه و چیدمان اجزای آن مطابق با تغییر عرض صفحه تغییر می یابد به گونه ای که هیچ اسکرول افقی پدید نمی آید. اما در سایت های غیر ریسپانسیو چنین تطابقی رخ نمی هد و اسکرول افقی لازم است تا بتوان قسمت های پنهان شده چپ و راست صفحه را مرور کرد.

همانگونه که ذکر شد طراحی وب سایت واکنش گرا به وب سایت هایی اطلاق می شوند که با تغییر دستگاه مانند تبلت ها ، گوشی های هوشمند و… از خود انعطاف نشان داده و با تغییر رزولوشن، تغییر خواهند یافت. در اینگونه سایت ها بر خلاف وب سایت های قدیمی و فاقد ویژگی ریسپانسیو، نمایش تصاویر و اطلاعات در ابعاد مختلف با مشکل مواجه نخواهد شد و دیگر نیازی به زوم کردن نیست.

این تکنیک به کمک ویژگی های جدید Media Queries که در CSS3 تعریف شده است و همچنین طراحی های شناور(Fluid Proportion-Based Grids) این قابلیت را در وب سایت ایجاد خواهد کرد  تا بدون احتیاج به ساختن نسخه های متفاوت برای دستگاه های مختلف، با تغییر ابعاد صفحه نمایشگر و رزولوشن، محتویات و ساختار صفحه نیز واکنش نشان داده و انعطاف پذیر گردند. به بیان روشن تر در سایت های ریسپانسیو، اسکلت و ساختار لایه‌های سایت بصورت شناور طراحی می‌ گردد و با کمک خاصیت مدیا در تگ لینک با توجه به ابعاد صفحه، CSS مربوط به آن بارگذاری خواهد گردید.

اهداف طراحی سایت ریسپانسیو

سایت های واکنش گرا به دلیل اینکه بازدید کننده را در محدودیت استفاده از دستگاه قرار نمی دهند و وی می تواند با ابزار های مختلف، سایت را بصورت مطلوب مشاهده نماید، محبوب تر و کاربر پسندتر از بقیه وب سایت ها محسوب می گردند. امروزه بیش از پنجاه درصد کاربران، وب سایت های مورد نیازشان را با گوشی های هوشمند خود مشاهده و مورد استفاده قرار می دهند. بنابراین در صورتی که سایت شما ریسپانسیو نباشد، کاربران شما یکی پس از دیگری از مراجعه دوباره به وب سایتتان امتناع ورزیده و در نتیجه به دنبال سایت هایی خواهند بود که انعطاف و واکنشگرایی نسبت به صفحه گوشی های همراه داشته باشند از اینرو با طراحی وب سایت ریسپانسیو تعداد بازدیدکنندگان شما بالا خواهد رفت و این مورد در بالا رفتن رتبه و جایگاه سایت شما در موتورهای جستجو نیز نقش موثری خواهد داشت.

ذات طراحی سایت ریسپانسیو به گونه ای است که ” seo friendly ” محسوب می گردند چرا که تمام محتویات داخلی و بیرونی سایت را در وسط صفحه قرار می دهند و ترکیب بندی محتوای صفحات به نحوی که برای موتورهای جستجو به راحتی در اختیار قرار بگیرد، را امکانپذیر می سازد.

وب سایت های ریسپانسیو

اشل های استاندارد در طراحی سایت Responsive

نکته حائز اهمیت در طراحی سایت ریسپانسیو ساختاری است که از آن پیروی می کند. بسیار مهم است که یک وب سایت بر پایه ساختارهای از پیش تعریف شده به قالب واکنشگرایی تبدیل گردد.

یکی از مهمترین این ساختارها ” بوت استراپ ” می باشد که توسط شرکت معتبر توئیتر ارایه شده است و شرکت طراحی سایت پیام آوا نیز از آن و همچنین ساختارهای معتبر دیگر بهره می گیرد. استفاده از این ساختار سبب می شود که با توجه به یکسان بودن آن در وب سایت های بسیار زیادی که در بستر وب پیاده سازی شده است سرعت بارگذاری سایت بسیار بالا رفته و همچنین مرورگرها نیز دقیقا می توانند آن را شناسایی کرده و سریع تر وب سایت را در قالب درخواست شده به نمایش بگذارند.

طراحی وب سایت های ریسپانسیو توسط پیام آوا

شرکت پیام آوا با توجه به این موضوع که بیش از میلیون ها کاربر ایرانی بطور روزمره با استفاده از گوشی هوشمند یا تبلت خود به وب سایت های فارسی زبان سر می زنند، لذا پیاده سازی و اجرای اغلب وب سایت ها را بر مبنای تکنیک های ریسپانسیو بنا نهاده تا مالکان سایت ها بتوانند مخاطبان خود را حفظ نموده و از این طریق بر آمار بازدیدکنندگان آنها نیز افزوده شده و همگام با این امر سئوی سایت نیز افزایش یابد.

 





:: بازدید از این مطلب : 155
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه شنبه 3 مرداد 1396 | نظرات ()
مطالب مرتبط با این پست
لیست
می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: